<template>
    <div class="login-container">
        <div class="login-banner">
            <div class="logo"></div>
        </div>
        <div class="login-form">
            <div class="login-form-inner">
                <img class="logo" src="../../../assets/image/header/logo.png" alt srcset />
                <div class="form-scan-wrap">
                    <el-form class="form-wrap-left" :model="loginForm" :rules="rules" ref="loginForm" label-width="0px">
                        <el-form-item label prop="login_name">
                            <el-input v-model="loginForm.login_name" maxlength="11" placeholder="请输入账号">
                                <i slot="prefix" class="el-input__icon el-user"></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item label prop="login_password">
                            <el-input type="password" v-model="loginForm.login_password" maxlength="20"
                                placeholder="请输入登录密码">
                                <i slot="prefix" class="el-input__icon el-pwd"></i>
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <div class="qrcode">
                        <img src="../../../assets/image/app/qrcode.jpg" alt srcset />
                    </div>
                </div>
                <div class="form-bottom">
                    <el-checkbox v-model="checked" @change="rememberAccunt">记住密码</el-checkbox>
                </div>
                <el-button :disabled="disabled"
                    :class="['login-btn',{'disabled':disabled},{'login-submit-btn':loginForm.login_name && loginForm.login_password}]"
                    type="primary" @click="handleLogin()">{{disabled ? '正在登录...':'登录'}}</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import * as api from "@/http/admin-api.js";
import AES from "crypto-js/aes";
import CryptoJS from "crypto-js";
export default {
    data() {
        return {
            loginForm: {
                login_name: "",
                login_password: ""
            },
            rules: {
                login_name: [
                    {
                        required: true,
                        message: "账号不能为空",
                        trigger: "blur"
                    }
                ],
                login_password: [
                    {
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur"
                    }
                ]
            },
            provinceList: [],
            cityList: [],
            checked: false,
            CRYPTOJSKEY: "abcdefghighkml",
            disabled: false
        };
    },
    created() {
        if (this.$cookie.get("user")) {
            this.decryptAccount();
        }
        if (this.$route.query && this.$route.query.login_name) {
            this.loginForm.login_name = this.$route.query.login_name;
            this.loginForm.login_password = this.$route.query.login_password;
            sessionStorage.setItem("flg", this.$route.query.flg);
            this.$router.replace("/login");
            this.handleLogin(true);
        }
        document.addEventListener("keydown", this.enterKeyUp);
    },
    methods: {
        enterKeyUp(e) {
            let key = window.event.keyCode || e.keyCode;
            if (key === 13) {
                this.handleLogin();
            }
        },
        /**
         * 路由跳转
         * params { url : 路由路径}
         */
        routerGo(url) {
            this.$router.push(url);
        },
        /**
         * 登录
         */
        handleLogin(status) {
            this.rememberAccunt();
            if (status) {
                api.submitLogin(this.loginForm).then(res => {
                    if (res) {
                        this.$store.dispatch("getUserInfo");
                    }
                });
            } else {
                this.$refs["loginForm"].validate(valid => {
                    if (valid) {
                        this.disabled = true;
                        api.submitLogin(this.loginForm).then(res => {
                            if (res && res.error_code === "0") {
                                sessionStorage.setItem("token", res.token);
                                this.getUserInfo();
                            }
                            this.disabled = false;
                        });
                    } else {
                        return false;
                    }
                });
            }
        },
        /**
         * 获取用户信息
         */
        getUserInfo() {
            this.$store.dispatch("getUserInfo");
        },
        /**
         * 记住账号--加密
         */
        rememberAccunt() {
            if (this.checked) {
                const username = CryptoJS.AES.encrypt(
                    this.loginForm.login_name,
                    this.CRYPTOJSKEY
                ).toString();
                const password = CryptoJS.AES.encrypt(
                    this.loginForm.login_password,
                    this.CRYPTOJSKEY
                ).toString();
                this.$cookie.set("user", username + "-" + password, 30);
            } else {
                this.$cookie.delete("user");
            }
        },
        /**
         * 记住密码 账号解密
         */
        decryptAccount() {
            const [username, password] = this.$cookie.get("user").split("-");
            const usernameStr = CryptoJS.AES.decrypt(
                username,
                this.CRYPTOJSKEY
            );
            const passwordStr = CryptoJS.AES.decrypt(
                password,
                this.CRYPTOJSKEY
            );
            const usernameOrigin = usernameStr.toString(CryptoJS.enc.Utf8);
            const passwordOrigin = passwordStr.toString(CryptoJS.enc.Utf8);
            this.loginForm.login_name = usernameOrigin;
            this.loginForm.login_password = passwordOrigin;
            this.checked = true;
        }
    },
    destroyed() {
        document.removeEventListener("keydown", this.enterKeyUp);
    }
};
</script>
<style lang="scss">
.login-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 15%;
    box-sizing: border-box;
    background: url("../../../assets/image/login/bg.jpg") no-repeat;
    background-size: 100% 100%;
    position: relative;

    .login-form {
        width: 3.9rem;
        height: 3.9rem;
        min-width: 500px;
        min-height: 500px;
        background: url("../../../assets/image/login/circle_bg.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .login-form-inner {
            width: 340px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;

            .form-scan-wrap {
                width: 100%;
                display: inline-flex;
                justify-content: space-between;

                .form-wrap-left {
                    width: calc(100% - 0.6rem);
                }

                .qrcode {
                    width: 0.55rem;
                    height: 0.55rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            transform: translate(-50%, -90%);

            .el-checkbox__input.is-checked+.el-checkbox__label {
                color: #333333;
            }

            .el-checkbox__input.is-checked .el-checkbox__inner,
            .el-checkbox__input.is-indeterminate .el-checkbox__inner {
                background-color: #ed4346;
                border-color: #ed4346;
            }

            .el-input--prefix .el-input__inner {
                padding-left: 40px;
            }

            .el-user {
                width: 15px;
                height: 19px;
                display: inline-block;
                background: url("../../../assets/image/login/user.png") no-repeat;
                background-size: 100% 100%;
                margin-top: 10px;
                margin-left: 10px;
            }

            .el-pwd {
                width: 15px;
                height: 19px;
                margin-top: 10px;
                margin-left: 10px;
                display: inline-block;
                background: url("../../../assets/image/login/pwd.png") no-repeat;
                background-size: 100% 100%;
            }

            .logo {
                width: 1.43rem;
                margin: 0 auto;
                margin-bottom: 0.15rem;
            }

            .form-bottom {
                margin-top: -0.05rem;
                margin-bottom: 0.2rem;
            }

            .login-btn {
                // color: #fff;
                color: #333;
                height: 0.28rem;
                line-height: 0.28rem;
                margin-bottom: 10px;
                cursor: pointer;
                // background: linear-gradient(#17579f, #3274bf);
                // background: linear-gradient(#ed4346, #d81519);
                background: #d9d6ce;
                width: 1.15rem;
                padding: 0;
                border-radius: 5px;
                border: none;
                outline: none;

                &:hover {
                    background: #00c1de;
                    color: #fff;
                }
            }

            .login-submit-btn {
                background: #00c1de;
                color: #fff;
            }

            .disabled {
                background: #bdbdbd !important;
                color: white !important;
            }

            .form-bottom {
                text-align: left;
                display: flex;
                flex-direction: row;

                .register-btn,
                .forget-btn {
                    color: #3381ff;
                    font-size: 12px;
                    line-height: 30px;
                    margin: 0 10px;
                    cursor: pointer;
                }

                .register-btn {
                    margin-right: 20px;
                }
            }
        }
    }
}

.company-dialog {
    .el-select {
        width: 100%;
    }

    .company-row {
        margin-top: 20px;
    }
}
</style>